<template>
  <div>

    <!-- Table -->
    <el-dialog title="课程信息" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="课程名称" width="150"></el-table-column>
        <el-table-column property="name" label="任课教师" width="200"></el-table-column>
        <el-table-column property="address" label="开始时间"></el-table-column>
        <el-table-column property="address" label="结束时间"></el-table-column>
      </el-table>
    </el-dialog>

    <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
    <!--添加框-->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="身份" :label-width="formLabelWidth">
          <el-input v-model="form.userStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.passWord" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="大学" :label-width="formLabelWidth">
          <el-input v-model="form.university" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="创建时间" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="form.createTime" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="更新时间" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="form.updateTime" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <el-date-picker
          v-model="value1"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">

      <el-table-column prop="id" label="学号" width="100px"></el-table-column>
      <!--    <el-table-column prop="userStatus" label="身份" ></el-table-column>-->
      <el-table-column prop="userName" label="姓名" width="100px"></el-table-column>
      <el-table-column prop="passWord" label="密码" width="100px"></el-table-column>
      <el-table-column prop="university" label="大学" width="200px"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100px"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="200px"></el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>

        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="dialogTableVisible = true">查看课程
          </el-button>

          <el-button
            size="mini"
            @click="dialogTableVisible = true">查看作业
          </el-button>

          <el-button
            size="mini"
            @click="dialogTableVisible = true">添加课程
          </el-button>

          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">Delete
          </el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [],
      search: '',
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        userStatus: '',
        userName: '',
        passWord: '',
        university: '',
        sex: ''
      },
      formLabelWidth: '70px',
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    logMyDateTime() {
      console.log(this.value1)
    },
    getData: function() {
      axios.post('http://localhost:8090/user/student').then((res) => {
        console.log(res.data)
        this.tableData = res.data
      })
    },
    addStudent: function() {
      this.dialogFormVisible = false ,
        console.log(this.value1)
        axios.post('http://localhost:8090/user/addUser',
          {
            "userStatus":this.form.userStatus,
            "userName":this.form.userName,
            "passWord":this.form.passWord,
            "university":this.form.university,
            "sex":this.form.sex,
            "createTime":this.value1[0],
            "updateTime":this.value1[1]
          }
        ).then((res) => {
          this.getData()
          console.log(res.data)
          console.log(this.value1)
        })
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(id) {
      alert('你将删除这个学生！')
      console.log(id)
      axios.get('http://localhost:8090/user/deleteUser'
        , {
          params: {
            'id': id
          }
        }
      ).then((res) => {
        console.log(res.data)
        this.getData()
        this.$message('成功删除该学生')
      })
    }
  }
}
</script>
<!--<template>-->
<!--  <div class="app-container">-->
<!--    <el-table-->
<!--      v-loading="listLoading"-->
<!--      :data="list"-->
<!--      element-loading-text="Loading"-->
<!--      border-->
<!--      fit-->
<!--      highlight-current-row-->
<!--    >-->
<!--      <el-table-column align="center" label="ID" width="95" >-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.$index }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column  label="身份" width="110" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ scope.row.id }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="姓名" width="110" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ scope.row.author }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="密码" width="110" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          {{ scope.row.pageviews }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column class-name="status-col" label="Status" width="110" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column align="center" prop="created_at" label="Display_time" width="200">-->
<!--        <template slot-scope="scope">-->
<!--          <i class="el-icon-time" />-->
<!--          <span>{{ scope.id}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--&lt;!&ndash;    <el-table&ndash;&gt;-->
<!--&lt;!&ndash;      :data="tableData.slice((this.currentPage-1)*this.size,this.currentPage*this.size)"&ndash;&gt;-->
<!--&lt;!&ndash;      @selection-change="handleSelectionChange"&ndash;&gt;-->
<!--&lt;!&ndash;      ref="multipleTable"&ndash;&gt;-->
<!--&lt;!&ndash;      :row-class-name="tableRowClassName"&ndash;&gt;-->
<!--&lt;!&ndash;      style="width: 950px;height:450px">&ndash;&gt;-->
<!--&lt;!&ndash;      >&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;        type="selection"&ndash;&gt;-->
<!--&lt;!&ndash;        width="55">&ndash;&gt;-->
<!--&lt;!&ndash;      </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column prop="order" label="序号" width="120"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column prop="id" label="学号" width="120"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column prop="name" label="姓名" width="120"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column prop="subject" label="专业" width="120">&ndash;&gt;-->
<!--&lt;!&ndash;      </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column prop="hobby" label="爱好" width="120"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column prop="grade" label="年级" width="120"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-table-column fixed="right" label="操作" width="130">&ndash;&gt;-->
<!--&lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button type="text" size="small" @click="updateData(scope.row)"&ndash;&gt;-->
<!--&lt;!&ndash;          >修改&ndash;&gt;-->
<!--&lt;!&ndash;          </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button type="text" size="small" @click="deleteStudent(scope.row)"&ndash;&gt;-->
<!--&lt;!&ndash;          >删除&ndash;&gt;-->
<!--&lt;!&ndash;          </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;    </el-table>&ndash;&gt;-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { getList } from '@/api/table'-->

<!--export default {-->
<!--  filters: {-->
<!--    statusFilter(status) {-->
<!--      const statusMap = {-->
<!--        published: 'success',-->
<!--        draft: 'gray',-->
<!--        deleted: 'danger'-->
<!--      }-->
<!--      return statusMap[status]-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      list: [],-->
<!--      listLoading: true-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.fetchData()-->
<!--  },-->
<!--  methods: {-->

<!--    fetchData() {-->
<!--      this.listLoading = true-->
<!--      getList().then(response => {-->
<!--        this.list = this.getData()-->
<!--        this.list = response.data.items-->
<!--        this.listLoading = false-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--  <div class="student">-->
<!--    &lt;!&ndash;    导航栏&ndash;&gt;-->
<!--&lt;!&ndash;    <div class="router">&ndash;&gt;-->
<!--&lt;!&ndash;      <el-menu&ndash;&gt;-->
<!--&lt;!&ndash;        default-active="2"&ndash;&gt;-->
<!--&lt;!&ndash;        class="el-menu-vertical-demo"&ndash;&gt;-->
<!--&lt;!&ndash;        background-color="#6B238E"&ndash;&gt;-->
<!--&lt;!&ndash;        text-color="#fff"&ndash;&gt;-->
<!--&lt;!&ndash;        active-text-color="#ffd04b">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-menu-item index="3">&ndash;&gt;-->
<!--&lt;!&ndash;          <i class="el-icon-menu"></i>&ndash;&gt;-->
<!--&lt;!&ndash;          <router-link to="/Teacher">教师管理系统</router-link>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-menu-item index="4">&ndash;&gt;-->
<!--&lt;!&ndash;          <i class="el-icon-menu"></i>&ndash;&gt;-->
<!--&lt;!&ndash;          <router-link to="/Student">学生管理系统</router-link>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-menu>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->

<!--    <h1 style="text-align: center"></h1>-->
<!--    <el-button type="primary" @click="addData()" class="addStudent"-->
<!--    >添加-->
<!--    </el-button-->
<!--    >-->
<!--    <el-button type="primary" class="deleteStudent" @click="deleteData()"-->
<!--    >删除-->
<!--    </el-button-->
<!--    >-->
<!--    <br><br><br>-->
<!--    &lt;!&ndash;    添加框&ndash;&gt;-->
<!--    <el-dialog-->
<!--      :title="titleMap[dialogTitle]" :visible.sync="dialogFormVisible">-->
<!--      <el-form :model="form">-->
<!--        <el-form-item label="学号" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.id" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="姓名" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="专业" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.subject" placeholder="请选择专业">-->
<!--            <el-option label="软件工程" value="shanghai"></el-option>-->
<!--            <el-option label="智科" value="beijing"></el-option>-->
<!--            <el-option label="电科" value="beijing"></el-option>-->
<!--            <el-option label="大数据" value="beijing"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="爱好" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.hobby" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="年级" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.grade" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false;">取 消</el-button>-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          @click="submit"-->
<!--        >确 定-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--    &lt;!&ndash;    页面框&ndash;&gt;-->
<!--    <el-table-->
<!--      :data="tableData.slice((this.currentPage-1)*this.size,this.currentPage*this.size)"-->
<!--      @selection-change="handleSelectionChange"-->
<!--      ref="multipleTable"-->
<!--      :row-class-name="tableRowClassName"-->
<!--      style="width: 1000px;height:450px">-->
<!--      >-->
<!--      <el-table-column-->
<!--        type="selection"-->
<!--        width="55">-->
<!--      </el-table-column>-->

<!--      <el-table-column fixed="right" label="操作" width="130">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" size="small" @click="updateData(scope.row)"-->
<!--          >修改-->
<!--          </el-button>-->
<!--          <el-button type="text" size="small" @click="deleteStudent(scope.row)"-->
<!--          >删除-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    <div class="block" style="margin-left:30%">-->
<!--      &lt;!&ndash; 翻页功能 &ndash;&gt;-->
<!--      <el-pagination-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        :current-page="currentPage"-->
<!--        :page-sizes="[5, 10, 15, 20]"-->
<!--        :page-size="size"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="this.tableData.length">-->
<!--      </el-pagination>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import axios from 'axios'-->

<!--let selectArray = new Array();-->
<!--// let studentRow;-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      form: {},-->
<!--      dialogFormVisible: false,-->
<!--      formLabelWidth: "80px",-->
<!--      currentPage: 1,-->
<!--      size: 5,-->
<!--      tableData: [],-->
<!--      multipleSelection: [],-->
<!--      titleMap: {-->
<!--        addData: "添加学生",-->
<!--        updateData: "修改学生",-->
<!--      },-->
<!--      dialogTitle: ""-->
<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    this.getData()-->
<!--  },-->
<!--  methods: {-->
<!--    getData: function () {-->
<!--      axios.get("/getAllStudent").then((res) => {-->
<!--        this.tableData = res.data-->

<!--      }, )-->
<!--    },-->
<!--    submit() {-->
<!--      this.dialogFormVisible = false;-->
<!--      if (this.dialogTitle == "addData") {-->
<!--        axios.post("/add" ,-->
<!--          // "id": this.form.id,-->
<!--          // "name": this.form.name,-->
<!--          // "subject": this.form.subject,-->
<!--          // "hobby": this.form.hobby,-->
<!--          // "grade": this.form.grade-->
<!--          this.form-->
<!--        ).then(() => {-->
<!--          this.getData()-->
<!--          this.$message("成功添加数据")-->
<!--        })-->
<!--      } else if (this.dialogTitle == "updateData") {-->
<!--        axios.post("/updateStudent"-->
<!--          , {-->
<!--            "id": this.form.id,-->
<!--            "name": this.form.name,-->
<!--            "subject": this.form.subject,-->
<!--            "hobby": this.form.hobby,-->
<!--            "grade": this.form.grade-->
<!--          },-->
<!--        ).then((res)=> {-->
<!--          console.log(res.data)-->
<!--          console.log(this.form.id)-->
<!--          this.getData()-->
<!--          this.$message("成功修改数据")-->
<!--        })-->
<!--      }-->
<!--    },-->
<!--    addData() {-->
<!--      this.form = {};-->
<!--      this.dialogFormVisible = true;-->
<!--      this.dialogTitle = "addData";-->
<!--    },-->
<!--    updateData(row) {-->
<!--      this.dialogFormVisible = true;-->
<!--      this.dialogTitle = "updateData";-->
<!--      this.form = row;-->
<!--      // studentRow = row;-->
<!--    },-->
<!--    checkData(row) {-->
<!--      this.dialogFormVisible = true;-->
<!--      this.dialogTitle = "checkData";-->
<!--      this.form = row;-->
<!--    },-->
<!--    deleteData() {-->
<!--      for (let i = 0; i < this.multipleSelection.length; i++) {-->
<!--        selectArray[i] = this.multipleSelection[i].id;-->
<!--      }-->
<!--      let k = selectArray.length-->
<!--      for (let j = 0; j < k; j++) {-->
<!--        this.isDelete(selectArray[j]);-->
<!--      }-->
<!--      this.getData();-->
<!--    },-->
<!--    isDelete(id){-->
<!--      axios.get("/delete"-->
<!--        , {-->
<!--          params: {-->
<!--            "id": id,-->
<!--          }-->
<!--        }-->
<!--      ).then(() => {-->
<!--        this.getData()-->
<!--        this.$message("成功删除学生")-->
<!--      })-->

<!--    },-->
<!--    deleteStudent(row) {-->
<!--      this.isDelete(row.id)-->
<!--    },-->
<!--    tableRowClassName({row, rowIndex}) {-->
<!--      let len = this.tableData.length;-->
<!--      let i = 0;-->
<!--      if (i < len) {-->
<!--        for (let j = 1; j <= len / this.size + 1; j++) {-->
<!--          if (this.currentPage == j) {-->
<!--            row.order = rowIndex + 1 + (this.currentPage - 1) * this.size;-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    /*-->
<!--     *翻页方法-->
<!--     */-->
<!--    handleSizeChange(val) {-->
<!--      // console.log(`每页 ${val} 条`);-->
<!--      this.size = val-->
<!--    },-->
<!--    handleCurrentChange(val) {-->
<!--      // console.log(`当前页: ${val}`);-->
<!--      this.currentPage = val-->
<!--    },-->
<!--    /*-->
<!--     *全选方法-->
<!--     */-->
<!--    toggleSelection(rows) {-->
<!--      if (rows) {-->
<!--        rows.forEach(row => {-->
<!--          this.$refs.multipleTable.toggleRowSelection(row);-->
<!--        });-->
<!--      } else {-->
<!--        this.$refs.multipleTable.clearSelection();-->
<!--      }-->
<!--    },-->
<!--    handleSelectionChange(val) {-->
<!--      this.multipleSelection = val;-->
<!--    },-->

<!--  },-->

<!--};-->
<!--</script>-->
<!--<style>-->
<!--.student {-->
<!--  width: 950px;-->
<!--  height: 500px;-->
<!--  position: relative;-->
<!--  left: 300px;-->
<!--}-->

<!--.router {-->
<!--  width: 200px;-->
<!--  position: fixed;-->
<!--  left: 0px;-->
<!--}-->

<!--a {-->
<!--  color: #FFFFFF;-->
<!--  text-decoration: none;-->
<!--}-->
<!--</style>-->
